<template>
  <div class="selectCity">
    <h2>城市选择</h2>
    <!-- <van-index-bar>
      <van-index-anchor index="A" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
    </van-index-bar> -->
    <van-index-bar :index-list="indexList">
      <template v-for="(item, name) in citylist">
        <van-index-anchor :index="name" :key="name" />
         <van-cell :title="ele.name"  v-for="ele in item" :key="ele.id" @click="tiao"/>       
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import api from "../../api/index";
export default {
  data() {
    return {
      //城市列表
      citylist: {},
      indexList:[],
    };
  },
  methods:{
      tiao(event){
          console.log('点击---',event);
          console.log('点++++击---',event.target.innerText);
          //点击城市名称 返回上一层 并且传递参数给首页
           //本地存储
          localStorage.setItem('city',event.target.innerText)
        //   this.$router.push('/')
        // document.documentElement.scrollTop=0;
          this.$router.go(-1)
         
      }
  },
  created() {
    api.geyCityCode().then((res) => {
      console.log(res.data.result.citylist);
      this.citylist = res.data.result.citylist;
      this.indexList=Object.keys(this.citylist)
    });
  },
};
</script>

<style lang="less" scoped>
.selectCity {
  color: #000;
  text-align: left;
  h2 {
    padding: 0.2rem;
  }
}
</style>